<template>
  <div id="left1" class="left1"></div>
</template>

<script>
import * as echarts from "echarts";

export default {
  // 组件名称
  name: "demo",
  // 组件参数 接收来自父组件的数据
  props: {},
  // 组件状态值
  data() {
    return {};
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {},
  // 组件方法
  methods: {
    // 空气质量等级0-50为优#00e400，51-100为良#FFFF00，101-150为轻度污染#ff7e00，151-200为中度污染#FF0000，201-300为重度污染#99004c，301-500是严重污染#7e0023；

    draw() {
      var ROOT_PATH =
        "https://cdn.jsdelivr.net/gh/apache/echarts-website@asf-site/examples";

      let xAxisData = [];
      // 预测数据选项

      // let data0 = [
      //   {
      //     aqi_max: 63.0,
      //     aqi_min: 30.0,
      //     datadate: "2019-12-17T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi_max: 63.0,
      //     aqi_min: 30.0,
      //     datadate: "2019-12-17T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi_max: 63.0,
      //     aqi_min: 30.0,
      //     datadate: "2019-12-17T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi_max: 63.0,
      //     aqi_min: 30.0,
      //     datadate: "2019-12-17T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi_max: 63.0,
      //     aqi_min: 30.0,
      //     datadate: "2019-12-17T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi_max: 63.0,
      //     aqi_min: 30.0,
      //     datadate: "2019-12-17T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi_max: 63.0,
      //     aqi_min: 30.0,
      //     datadate: "2019-12-17T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi_max: 63.0,
      //     aqi_min: 30.0,
      //     datadate: "2019-12-17T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi_max: 63.0,
      //     aqi_min: 30.0,
      //     datadate: "2019-12-17T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      // ];
      // 实际检测数据
      // let data = [
      //   {
      //     aqi: 63.0,
      //     aqi_mask: "yes",
      //     datadate: "2019-12-17T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi: 140.0,
      //     aqi_mask: "yes",
      //     datadate: "2019-12-18T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi: 180.0,
      //     aqi_mask: "yes",
      //     datadate: "2019-12-19T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      //   {
      //     aqi: 112.0,
      //     aqi_mask: "yes",
      //     datadate: "2019-12-20T00:00:00",
      //     name: "哈尔滨市",
      //     code: "230100",
      //   },
      // ];
      let data1 = [
        1,
        "-",
        1,
        "-",
        1,
        1,
        "-",
        "-",
        "-",
        "-",
        1,
        1,
        1,
        1,
        "-",
        "-",
        1,
        1,
        1,
        "-",
        1,
        "-",
        1,
        1,
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
      ];
      let data2 = [
        1,
        "-",
        1,
        1,
        1,
        1,
        "-",
        "-",
        1,
        "-",
        1,
        "-",
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
        1,
      ];
      let data3 = [
        "-",
        "-",
        "-",
        1,
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        1,
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        1,
        1,
        1,
        "-",
        1,
        1,
      ];
      let data4 = [
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
      ];
      let data5 = [
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
      ];
      let data6 = [
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
      ];
      let data7 = [
        1,
        "-",
        1,
        "-",
        1,
        1,
        "-",
        "-",
        "-",
        "-",
        1,
        1,
        1,
        1,
        "-",
        "-",
        1,
        1,
        1,
        "-",
        1,
        "-",
        1,
        1,
        "-",
        "-",
        "-",
        "-",
        "-",
        "-",
      ];

      for (let i = 1; i < 30; i++) {
        xAxisData.push("11/" + i);
        // data1.push(1);
        // data2.push(1);
        // data3.push(1);
      }
      var emphasisStyle = {
        itemStyle: {
          shadowBlur: 10,
          shadowColor: "rgba(0,0,0,0.3)",
        },
      };
      const weatherIcons = {
        Sunny: ROOT_PATH + "/data/asset/img/weather/sunny_128.png",
        Cloudy: ROOT_PATH + "/data/asset/img/weather/cloudy_128.png",
        Showers: ROOT_PATH + "/data/asset/img/weather/showers_128.png",
      };
      // 基于准备好的dom，初始化echarts实例
      var myChart = echarts.init(document.getElementById("left1"));
      // 绘制图表
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          axisPointer: { type: "cross" },
        },
        // legend: {},
        xAxis: [
          {
            data: xAxisData,
          },
          {
            data: xAxisData,
            show: false,
            axisLabel: {
              formatter: function (value) {
                return "{" + value + "| }\n{value|" + value + "}";
              },
              margin: 20,
              rich: {
                value: {
                  lineHeight: 30,
                  align: "center",
                },
                Sunny: {
                  height: 40,
                  align: "center",
                  backgroundColor: {
                    image: weatherIcons.Sunny,
                  },
                },
                Cloudy: {
                  height: 40,
                  align: "center",
                  backgroundColor: {
                    image: weatherIcons.Cloudy,
                  },
                },
                Showers: {
                  height: 40,
                  align: "center",
                  backgroundColor: {
                    image: weatherIcons.Showers,
                  },
                },
              },
            },
          },
        ],
        yAxis: {},
        series: [
          {
            name: "bar",
            type: "bar",
            stack: "one",
            xAxisIndex: 0,
            emphasis: emphasisStyle,
            data: data1,
            itemStyle: {
              normal: {
                color: "#00e400",
              },
            },
          },
          {
            name: "bar2",
            type: "bar",
            stack: "one",
            xAxisIndex: 0,
            emphasis: emphasisStyle,
            data: data2,
            itemStyle: {
              normal: {
                color: "#ffff00",
              },
            },
          },
          {
            name: "bar3",
            type: "bar",
            stack: "one",
            xAxisIndex: 0,
            emphasis: emphasisStyle,
            data: data3,
            itemStyle: {
              normal: {
                color: "#ff7e00",
              },
            },
          },
          {
            name: "bar4",
            type: "bar",
            stack: "one",
            xAxisIndex: 0,
            emphasis: emphasisStyle,
            data: data4,
            itemStyle: {
              normal: {
                color: "#ff0000",
              },
            },
          },
          {
            name: "bar5",
            type: "bar",
            stack: "one",
            xAxisIndex: 0,
            emphasis: emphasisStyle,
            data: data5,
            itemStyle: {
              normal: {
                color: "#99004c",
              },
            },
          },
          {
            name: "bar6",
            type: "bar",
            stack: "one",
            xAxisIndex: 0,
            emphasis: emphasisStyle,
            data: data6,
            itemStyle: {
              normal: {
                color: "#7e0023",
              },
            },
          },
          {
            name: "bar8",
            type: "bar",
            stack: "one",
            xAxisIndex: 1,
            emphasis: emphasisStyle,
            data: data7,
            itemStyle: {
              normal: {
                color: "rgba(157,163,223, 0)",
              },
            },
          },
          {
            name: "bar7",
            type: "bar",
            stack: "one",
            xAxisIndex: 1,
            emphasis: emphasisStyle,
            data: data7,
          },
        ],
      });
    },
  },
  // 以下是生命周期钩子
  mounted() {
    this.draw();
  },
};
</script>
<style lang='less' scoped>
.left1 {
  width: 100%;
  height: 100%;
}
</style>
